<template>
  <el-dialog
    :title="!increaseForm.id ? $t('message.add') + $t('message.csjfgz') : $t('message.edit') + $t('message.csjfgz')"
    :visible.sync="dialogVisible"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    width="800px"
  >
    <div>
      <div class="warnningTip"><i class="el-icon-warning-outline" />{{ $t('message.csjfyjsm') }}</div>
      <el-form ref="ruleForm" :model="increaseForm" label-width="auto" :rules="rules" label-suffix="：">
        <el-form-item :label="$t('message.gzmc')" prop="name">
          <el-input v-model="increaseForm.name" class="w400" :placeholder="$t('message.qsr') + $t('message.jfgzmc')" />
        </el-form-item>
        <el-form-item :label="$t('message.yj')">
          <el-input v-model="increaseForm.money" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" class="w400" :placeholder="$t('message.qsrjemr0')" />
          <span class="placeholder6 ml10">{{ $t('message.gmtptbkyj') }}</span>
        </el-form-item>
        <el-form-item :label="$t('message.mfsj')">
          <el-input v-model="increaseForm.freeTime" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" class="w400" :placeholder="$t('message.qsrsjfzmr0')" />
          <span class="placeholder6 ml10">{{ $t('message.dwfzmfsjnbsf') }}</span>
        </el-form-item>
        <el-form-item :label="$t('message.csdj')">
          <el-input v-model="increaseForm.unitPrice" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" class="w400" :placeholder="$t('message.qsrjemr0')" />
          <span class="placeholder6 ml10">{{ $t('message.csbfjsdj') }}</span>
        </el-form-item>
        <el-form-item :label="$t('message.csjsdw')" prop="units">
          <el-radio v-model="increaseForm.units" :label="30">{{ $t('message.fz30') }}</el-radio>
          <el-radio v-model="increaseForm.units" :label="60">{{ $t('message.fz60') }}</el-radio>
          <span class="placeholder6 ml10">{{ $t('message.cscgmfschksjf') }}</span>
        </el-form-item>
        <el-form-item :label="$t('message.sort')" prop="sortNum">
          <el-input v-model="increaseForm.sortNum" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" class="w400" :placeholder="$t('message.qsr') + $t('message.sort')" />
        </el-form-item>
        <el-form-item :label="$t('message.status')">
          <el-switch v-model="increaseForm.status" />
          <span class="ml10">{{ increaseForm.status ? $t('message.qy'):$t('message.jy') }}</span>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('message.qx') }}</el-button>
      <el-button v-preventReClick :loading="subLoading" type="primary" @click="submit">{{ $t('message.qr') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import store from '@/store'

import { ticketChargeTempAdd, ticketChargeTempEdit } from '@/api'
export default {
  data() {
    return {
      subLoading: false,
      increaseForm: {
        name: '',
        money: '',
        unitPrice: '',
        units: 30,
        sortNum: '',
        freeTime: '',
        status: false
      },
      dialogVisible: false,
      rules: {
        name: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.gzmc'), trigger: 'blur' }
        ],
        sortNum: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.sort'), trigger: 'blur' }
        ],
        units: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.csjsdw'), trigger: 'change' }
        ]
      },
      modalDialog: store.getters.dialog
    }
  },
  methods: {
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const { increaseForm } = this
          const data = {
            ...increaseForm,
            money: increaseForm.money || 0,
            freeTime: increaseForm.freeTime || 0,
            unitPrice: increaseForm.unitPrice || 0,
            status: increaseForm.status ? '1' : '0'
          }
          this.subLoading = true
          if (increaseForm.id) {
            ticketChargeTempEdit({ param: { ...data }}).then(res => {
              this.subLoading = false
              if (res.errorCode !== '000000') return
              this.$message.success(this.$t('message.editcg'))
              this.$emit('submit', 1)
              this.dialogVisible = false
            }, () => {
              this.subLoading = false
            })
          } else {
            ticketChargeTempAdd({ param: { ...data }}).then(res => {
              this.subLoading = false
              if (res.errorCode !== '000000') return
              this.$message.success(this.$t('message.tjcg2'))
              this.$emit('submit', 1)
              this.dialogVisible = false
            }, () => {
              this.subLoading = false
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancel() {
      this.dialogVisible = false
      this.$refs['ruleForm'].resetFields()
    },
    foo() {
      console.log('---')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
